<template>
  <div class="app-container">
    <div class="top">
      <div class="left">
        <img
          src="@/assets/images/icon/leftIcon.png"
          alt=""
          srcset=""
          style="width: 15px; height: 14px"
        />素材库编辑
      </div>
    </div>
    <div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="120px"
      >
        <el-form-item label="一级标题" prop="ipaddr" label-width="130px">
          <el-input
            v-model="topData.grandparent"
            placeholder=""
            clearable
            @keyup.enter.native="handleQuery"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="二级指标：" prop="userName">
          <el-input
            v-model="topData.parentName"
            placeholder=""
            clearable
            @keyup.enter.native="handleQuery"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="素材库名称：" prop="userName">
          <el-input
            v-model="topData.name"
            placeholder="素材库名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      </el-form>
    </div>
    <!-- 导入 -->
    <div class="uploadFile">
      <FileUpload @getFilesContent="getFilesContent" :limit="10000000"></FileUpload>
    </div>
    <div class="content">
      <el-form ref="form" :model="topData" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="内容">
              <!-- <Editors v-model="topData.content" :min-height="400" height="400" /> -->
              <Editors v-model="topData.content" @getContent="editorInput" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="width: 121px; margin-left: 80px">
        <el-button
          type="primary"
          size="medium"
          @click="updateFn"
          style="width: 100%"
          v-hasPermi="['system:material:edit']"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { updateName, materialDetials } from "@/api/DTotal/DTotal";
import { Message } from "element-ui";
// import Editors from "@/components/Wangeditor/editor";
import Editors from '@/components/ckeditor/index.vue';
export default {
  components: {
    Editors,
  },
  data() {
    return {
      materialId: "",
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      pageNum: 1,
      pageSize: 10,
      // 查询参数
      queryParams: {
        ipaddr: undefined,
        userName: undefined,
      },
      topData: {
        grandparent: "", //1级标题
        parentName: "", //2级标题
        name: "", //
        content: "",
      },
    };
  },
  created() {
    this.materialId = this.$route.query.materialId;
    if (this.materialId) this.getDetails();
  },
  methods: {
    //获取素材的详情
    getDetails() {
      materialDetials(this.materialId).then(res => {
        if (200 == res.code) {
          this.topData = res.data;
        }
      })
    },
    //获取编辑框的值
    editorInput(value) {
      this.topData.content = value;
    },
    getFilesContent(e) {
      this.topData.content = e;
    },
    updateFn() {
      setTimeout(() => {
        let data = {
          name: this.topData.name,
          materialId: this.materialId,
          content: this.topData.content,
        };
        updateName(data).then((res) => {
          Message({ message: "保存成功", type: "success" });
          this.$router.go(-1);
        });
      }, 0);
    },
  },
};
</script>
<style scoped lang="scss">
.title {
  display: flex;
  color: #a9a9aa;

  .active {
    color: #157dfa;
  }

  .step1 {
    margin-right: 10px;
  }

  span {
    margin-right: 8px;
  }
}

.top {
  display: flex;
  justify-content: space-between;
  color: #333;
  margin: 15px 0;

  .left {
    img {
      margin-right: 10px;
    }
  }

  .right {}
}

.uploadFile {
  margin: 20px 100px;
}
</style>
